@extends('wap.layout.base')
@section('scripts')
    <script src="{{ asset('js/moment.min.js') }}" type="text/javascript"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: function() {
                return {
                    title: "{{ $info['title'] }}",
                }
            },
            methods: {
                onClickLeft() {
                    window.location.href = "{{ route('wap.project.index') }}";
                },
                goHome(){
                    window.location.href = "{{ route('wap.index.index') }}";
                },
                goInfo(id){
                    window.location.href = "{{ route('wap.new.info') }}"+'?id='+id;
                }
            }
        });
    </script>
@endsection
@section('content')
    <div class="container main project-info" style="background: #fff">
        <div class="row">
            <div id="app" v-cloak>
                <van-nav-bar
                        :title="title"
                        left-text=""
                        border
                        fixed="true"
                        left-arrow="false"
                        @click-left="onClickLeft">
                    <van-icon name="arrow-left" slot="left"/>
                </van-nav-bar>
                <div class="col-xs-12">
                    <div class="project-info-head">
                        <div class="detail-head">
                            <div class="detail-thumb">
                                <img src="{{ $info['thumb'] }}" alt="">
                            </div>
                            <div class="detail-go">
                                <p class="detail-title"> {{ str_limit($info['title'],10) }} <button>{{ $info['cate']['name'] }}</button></p>
                                <p class="detail-note"> {{ str_limit($info['summary'],26) }}</p>
                                <p class="detail-time">
                                    <i class="fa fa-map-marker"></i> &nbsp;{{ $info['region'] }}&nbsp;&nbsp;&nbsp;&nbsp;
                                    <i class="fa fa-eye"></i> &nbsp;{{ $info['view'] }}
                                </p>
                                <p  class="detail-time"><i class="fa fa-clock-o"></i> &nbsp;{{ $info['online'] }}上线</p>
                            </div>
                        </div>
                        <div class="detail-link">
                            <p class="detail-home"> 官网：{{ $info['home_link'] }}</p>
                            <p class="detail-chrome"> 区块链浏览器：{{ $info['chrome_link'] }}</p>
                        </div>
                        <div class="detail-link" style="margin-top: 1rem">
                            <ul>
                                <li><a target="_blank" href="{{ $info['home_link'] }}">进入官网</a></li>
                                <li class="li-bai"><a target="_blank" href="{{ $info['white_link'] }}">查看白皮书</a></li>
                                <li><a target="_blank" href="{{ $info['github_link'] }}">GitHub</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 project-info-tab">
                    <van-tabs color="#13afe0" title-active-color="#13afe0" swipeable>
                        <van-tab title="基本信息">
                            <div class="project-cont">
                                <h4>项目简介</h4>
                                {{ $info['introduce'] }}
                                <h4 style="margin-top: 25px">项目成员</h4>
                                {{ $info['member'] }}
                                <h4 style="margin-top: 25px">项目亮点</h4>
                                {{ $info['merit'] }}
                                <h4 style="margin-top: 25px">应用场景</h4>
                                {{ $info['scene'] }}
                                <h4 style="margin-top: 25px">合作伙伴</h4>
                                {{ $info['partner'] }}
                                <h4 style="margin-top: 25px">交易平台</h4>
                                {{ $info['platform'] }}
                            </div>
                        </van-tab>
                        <van-tab title="相关资讯">
                            @foreach($news as $new)
                                <div class="col-xs-12" @click="goInfo({{$new['id']}})">
                                    <div class="main-item">
                                        <div class="main-item-img">
                                            @if($new['cateChild']['name'])
                                                <span class="tag-name">{{ $new['cateChild']['name'] }}</span>
                                            @else
                                                <span class="tag-name none"></span>
                                            @endif
                                            <img src="{{ $new['thumb'] }}">
                                        </div>
                                        <div class="main-item-info">
                                            <p class="info-title">{{ $new['title'] }}</p>
                                            <p class="info-other">
                                                <img src="{{ $new['user']['avatar'] }}">
                                                <span class="info-other-name">
                                                    {{ $new['created_at']->format('Y-m-d') }}<i></i>
                                                </span>
                                                <span class="info-other-view"><i class="fa fa-eye"></i> {{ $new['view'] }}</span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                            <div class="text-center col-xs-12">
                                <button @click="goHome" class="item-article-more go-new">查看更多 >> </button>
                            </div>
                        </van-tab>
                    </van-tabs>
                </div>
            </div>
        </div>
    </div>
@endsection